<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <div class="el-card">
      <!-- top按钮 -->
      <el-button
        type="warning"
        class="btn"
        @click="openDialog('add',null)"
      >新增工作模式</el-button>
      <!-- table表格 -->
      <el-table
        v-loading="loading"
        :data="workModelList"
        style="width: 100%"
        stripe
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
          width="287"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
          width="281"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
          width="281"
        >
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
          width="295"
        >
        </el-table-column>
        <el-table-column
          label="工作时间"
          width="300"
        >
          <template>
            <span>{{ workTime }}小时</span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column
          label="操作"
          width="165"
          align="center"
        >
          <template #default="scope">
            <el-button
              type="text"
              size="small"
              @click="openDialog('edit',scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              style="color: #f56c6c;"
              @click="del(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页  -->
      <el-pagination
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
    <!-- dialog  -->
    <el-dialog
      :title="title"
      :visible.sync="dialogTableVisible"
      @close="delForm"
    >
      <div class="TAB">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <el-tab-pane
            :disabled="tabOne"
            label="礼拜制"
            name="1"
          >
            <!-- 礼拜制表单  -->
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="工作模式名称:"
                prop="name"
              >
                <el-input
                  v-model="ruleForm.name"
                  style="width: 450px;"
                  placeholder="请填写工作模式名称"
                ></el-input>
              </el-form-item>
              <!-- 连续工作天数 -->
              <el-form-item
                label="连续工作天数:"
              >
                <el-checkbox
                  v-model="ruleForm.monday"
                  label="周一"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.tuesday"
                  label="周二"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.wednesday"
                  label="周三"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.thursday"
                  label="周四"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.friday"
                  label="周五"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.saturday"
                  label="周六"
                ></el-checkbox>
                <el-checkbox
                  v-model="ruleForm.sunday"
                  label="周日"
                ></el-checkbox>
              </el-form-item>
              <div class="tips">选中为工作时间，未选中为休息时间</div>
              <!-- 时间范围 -->
              <el-form-item
                label="时间范围:"
                prop="workDayNum"
                class="workDay"
              >
                <el-time-picker
                  v-model="value1"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                >
                </el-time-picker>
              </el-form-item>
              <el-form-item align="center">
                <el-button
                  type="warning"
                  style="margin-bottom:20px"
                  @click="sub()"
                >确定
                </el-button>
                <el-button
                  plain
                  style="margin-bottom:20px"
                  @click="dialogTableVisible = false"
                >取消
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 连续制度  -->
          <el-tab-pane
            :disabled="tabTwo"
            label="连续制"
            name="2"
          >
            <!-- 表单  -->
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              label-width="120px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="工作模式名称:"
                prop="name"
              >
                <el-input
                  v-model="ruleForm.name"
                  style="width: 450px;"
                  placeholder="请填写工作模式名称"
                ></el-input>
              </el-form-item>
              <!-- 连续工作天数 -->
              <el-form-item
                label="连续工作天数:"
              >
                <div style="margin-left: 1px;">
                  上<el-input
                    v-model="ruleForm.workDayNum"
                    style="width: 110px;"
                  >
                    <template slot="append">天</template>
                  </el-input>
                  休<el-input
                    v-model="ruleForm.restDayNum"
                    style="width: 110px;"
                  >
                    <template slot="append">天</template>
                  </el-input>
                </div>
              </el-form-item>
              <!-- 时间范围 -->
              <el-form-item
                label="时间范围:"
                prop="workDayNum"
                class="workDay"
              >
                <el-time-picker
                  v-model="value1"
                  is-range
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                >
                </el-time-picker>
              </el-form-item>
              <el-form-item align="center">
                <el-button
                  type="warning"
                  style="margin-bottom:20px"
                  @click="submit()"
                >确定
                </el-button>
                <el-button
                  plain
                  style="margin-bottom:20px"
                  @click="dialogTableVisible = false"
                >取消
                </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { workHistoryList, deleteWorkHistory, addWorkHistory, workHistoryInfo, updateWorkHistory } from '@/api/transit'
export default {
  data() {
    return {
      // 加载
      loading: true,
      // 请求数据
      pagination: {
        page: 1,
        pageSize: 10
      },
      // 总条数
      total: 0,
      // 工作模式列表
      workModelList: [],
      // 处理得工作时间
      workTime: '',
      // 弹窗
      dialogTableVisible: false,
      // 默认的Tabs 标签页
      activeName: '1',
      // 时间绑定转换成分钟
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
      // form表单
      ruleForm: {
        // 名称
        name: '',
        // 操作人
        operator: 57,
        // 休息天数
        restDayNum: null,
        // 星期一，0:不填充，1:工作，2:休息
        monday: null,
        // 星期二，0:不null1:工作，2:休息
        tuesday: null,
        // 星期三，0:不填充，1:工作，2:休息
        wednesday: null,
        // 星期四，0:不填充，1:工作，2:休息
        thursday: null,
        // 星期五，0:不填充，1:工作，2:休息
        friday: null,
        // 星期六，0:不填充，1:工作，2:休息
        saturday: null,
        // 星期日，0:不填充，1:工作，2:休息
        sunday: null,
        // 用户类型,1:员工，2:快递员，3:司机
        userType: '0',
        // 连续工作天数
        workDayNum: null,
        // 工作模式：1：礼拜制，2：连续制
        workPatternType: '1',
        // 工作开始时间1，分钟数
        workStartMinute1: 0,
        // 工作结束时间1，分钟数
        workEndMinute1: 0
      },
      // 表单多选
      checkList: [],
      // 模式类型
      type: null,
      title: '新增工作模式',
      tabOne: false,
      tabTwo: false
    }
  },
  created() {
    this.getWorkModelList()
  },
  methods: {
    // 每页多少条
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.getWorkModelList()
    },
    // 当前第几页
    handleCurrentChange(val) {
      this.pagination.page = val
      this.getWorkModelList()
    },
    // 获取工作模式列表
    async getWorkModelList() {
      const res = await workHistoryList(this.pagination)
      this.loading = false
      // console.log('工作模式列表', res)
      this.workModelList = res.data.items
      this.total = +res.data.counts
      // 结束时间减去开始时间向上取整
      this.workModelList.forEach(item => {
        this.workTime = (item.workEndMinute1 - item.workStartMinute1) / 60
        this.workTime = Math.ceil(this.workTime)
      })
    },
    // 删除工作模式
    async del(id) {
      // 询问用户是否确定删除
      this.$confirm('确定要删除吗?', '删除确定', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // 删除成功后重新请求数据
        await deleteWorkHistory(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.getWorkModelList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 新增礼拜制工作模式
    async sub() {
      // console.log('礼拜制')
      if (this.title === '编辑工作模式') {
        const {
          id,
          name,
          // 星期一，0:不填充，1:工作，2:休息
          monday,
          // 星期二，0:不null1:工作，2:休息
          tuesday,
          // 星期三，0:不填充，1:工作，2:休息
          wednesday,
          // 星期四，0:不填充，1:工作，2:休息
          thursday,
          // 星期五，0:不填充，1:工作，2:休息
          friday,
          // 星期六，0:不填充，1:工作，2:休息
          saturday,
          // 星期日，0:不填充，1:工作，2:休息
          sunday,
          workPatternType
        } = this.ruleForm
        await updateWorkHistory({
          id,
          name,
          friday: friday ? 1 : 2,
          monday: monday ? 1 : 2,
          saturday: saturday ? 1 : 2,
          sunday: sunday ? 1 : 2,
          thursday: thursday ? 1 : 2,
          tuesday: tuesday ? 1 : 2,
          wednesday: wednesday ? 1 : 2,
          workEndMinute1: this.value1[1].getHours() * 60 + this.value1[1].getMinutes(),
          workPatternType,
          workStartMinute1: this.value1[0].getHours() * 60 + this.value1[0].getMinutes()
        })
        this.$message({
          type: 'success',
          message: '编辑成功!'
        })
      } else {
        const { friday,
          name,
          monday,
          operator,
          restDayNum,
          saturday,
          sunday,
          thursday,
          tuesday,
          userType,
          wednesday,
          workDayNum,
          workPatternType } = this.ruleForm
        await addWorkHistory({
          name,
          friday: friday ? 1 : 2,
          monday: monday ? 1 : 2,
          operator,
          restDayNum,
          saturday: saturday ? 1 : 2,
          sunday: sunday ? 1 : 2,
          thursday: thursday ? 1 : 2,
          tuesday: tuesday ? 1 : 2,
          userType,
          wednesday: wednesday ? 1 : 2,
          workDayNum,
          workEndMinute1: this.value1[1].getHours() * 60 + this.value1[1].getMinutes(),
          workPatternType,
          workStartMinute1: this.value1[0].getHours() * 60 + this.value1[0].getMinutes()
        })
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }

      this.dialogTableVisible = false
      this.getWorkModelList()
    },
    // 新增连续制工作模式
    async submit() {
      if (this.title === '编辑工作模式') {
        const {
          id,
          name,
          restDayNum,
          workDayNum,
          workEndMinute1,
          workPatternType,
          workStartMinute1 } = this.ruleForm
        await updateWorkHistory({
          id,
          name,
          restDayNum,
          workDayNum,
          workEndMinute1,
          workPatternType,
          workStartMinute1
        })
        this.$message({
          type: 'success',
          message: '编辑成功!'
        })
      } else {
        const {
          name,
          restDayNum,
          workDayNum,
          workEndMinute1,
          workPatternType,
          workStartMinute1 } = this.ruleForm
        await addWorkHistory({
          name,
          restDayNum,
          workDayNum,
          workEndMinute1,
          workPatternType,
          workStartMinute1
        })
        this.$message({
          type: 'success',
          message: '添加成功!'
        })
      }
      this.dialogTableVisible = false
      this.getWorkModelList()
    },
    // 监听点击的是哪个tabs标签
    handleClick(tab) {
      console.log(tab.name)
      this.ruleForm.workPatternType = String(tab.name)
    },
    // 点击新增/编辑按钮
    async openDialog(typell, row) {
      this.value1 = ''
      this.ruleForm.restDayNum = null
      this.ruleForm.workDayNum = null
      this.ruleForm.monday = false
      this.ruleForm.tuesday = false
      this.ruleForm.wednesday = false
      this.ruleForm.thursday = false
      this.ruleForm.friday = false
      this.ruleForm.saturday = false
      this.ruleForm.sunday = false
      this.dialogTableVisible = true
      this.tabOne = false
      this.tabTwo = false
      if (typell === 'edit') {
        // console.log(row)
        this.title = '编辑工作模式'
        this.type = row.workPatternType
        const res = await workHistoryInfo(row.id)
        console.log(res, '回显数据')
        this.ruleForm = res.data
        // 后台给的分钟数转换成时间
        this.value1 = [new Date(2016, 9, 10, res.data.workStartMinute1 / 60, res.data.workStartMinute1 % 60), new Date(2016, 9, 10, res.data.workEndMinute1 / 60, res.data.workEndMinute1 % 60)]
        // 后台返回的1和2转换成true和false
        this.ruleForm.monday = res.data.monday === 1
        this.ruleForm.tuesday = res.data.tuesday === 1
        this.ruleForm.wednesday = res.data.wednesday === 1
        this.ruleForm.thursday = res.data.thursday === 1
        this.ruleForm.friday = res.data.friday === 1
        this.ruleForm.saturday = res.data.saturday === 1
        this.ruleForm.sunday = res.data.sunday === 1
        // 如果点的是1则给tabs切换成第一个
        // 切换到第一个礼拜制的时候,禁用连续制
        if (this.type === 1) {
          this.activeName = '1'
          this.tabTwo = true
        } else if (this.type === 2) {
          this.activeName = '2'
          this.tabOne = true
        }
      } else if (typell === 'add') {
        this.title = '新增工作模式'
        this.activeName = '1'
      }
    },
    delForm() {
      this.dialogTableVisible = false
      this.$refs.ruleForm.resetFields()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}

::v-deep .pagination {
  padding-bottom: 30px;
}

.tab-box {
  color: #20232a;

  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }

  ::v-deep .el-form-item__content {
    height: 40px;
  }

  ::v-deep .el-tabs__item {
    font-size: 14px;
  }

  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }

  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }

  .el-checkbox {
    margin-right: 12px;
  }

  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}

::v-deep .el-dialog__body {
  padding-top: 30px !important;

  .el-tabs__header {
    padding-bottom: 25px;
  }
}

::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}

.el-card {
  padding: 28px 28px 28px 28px
}

.dashboard-container {
  padding: 20px;
  background-color: #f3f4f7;
  padding-top: 23px;

  .btn {
    padding: 9px 0px;
    margin-bottom: 20px;
    width: 120px;
  }

  .el-pagination {
    text-align: center;
    margin: 20px 0px;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }

  .TAB {
    width: 700px;
    padding: 40px 60px 0;
    padding-top: 0px !important;
  }

  ::v-deep .el-tabs__item.is-active {
    color: black;
  }

  ::v-deep .tips{
    margin-left: 130px;
    margin-bottom: 14px;
    color:#bac0cd;
  }

}
</style>
